<template>
	<div class="box" v-if="shareStatus" :style="{width:winWidth+'px',height:winHeight+'px'}">
		<div @click.stop="onMask()" class="mask" :style="{width:winWidth+'px'}" @touchstart.stop='a' @touchmove.stop="b"
		 @touchend.stop='c'></div>
		<div class="share-box" @click.stop="e">
			<text class="title">分享到</text>
			<view class="scroll">
				<view class="scroll-item" v-for="(item,index) in shareData" :key="index">
					<image class="scroll-item-image" :src="item.src" @click="share(item)"></image>
					<text class="scroll-item-text">{{item.name}}</text>
				</view>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			shareStatus: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				winWidth: 0,
				winHeight: 0,
				
				shareData: [{
						src: 'https://wx.2024csnl.com/static/video-images/ss-1.png',
						name: '微信'
					},
					{
						src: 'https://wx.2024csnl.com/static/video-images/ss-2.png',
						name: '朋友圈'
					},
					{
						src: 'https://wx.2024csnl.com/static/video-images/sss-5.png',
						name: '复制链接'
					}
				],
				
			}
		},
		created() {
			this.getSystemInfo()
		},
		methods: {
			getSystemInfo() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.winWidth = res.windowWidth;
						that.winHeight = res.windowHeight;
					},
				})
			},
			onMask() {
				this.$emit('mask')
			},
			share(e){
				this.$emit('share',e)
			},
			setFriend(data){
				this.friendData=data
			},
			setType(data){
				this.shareData=data
			},
			setAction(data){
				this.actionData=data
			},
			a() {},
			b() {},
			c() {},
			d() {},
			e() {},
		}

	}
</script>

<style scoped>
	.box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10001;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.share-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-top: 30px;
		padding-bottom: 30px;
		background-color: #262628;
		z-index: 10002;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.title {
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.scroll {
		display: flex;
		flex-direction: row;
		padding: 10px;
	}

	.scroll-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 5px 10px;
		text-align: center;
	}
	.scroll-item-image-box{
		width: 50px;
		height: 50px;
		border-radius: 100%;
		background-color: #373737;
	}
	.scroll-item-bg-image{
		width: 30px;
		height: 30px;
		/* padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		padding-left: 10px; */
		margin-top: -40px;
		margin-left: 10px;
		margin-bottom: 20px;
	}
	.scroll-item-image {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}

	.scroll-item-text {
		font-size: 12px;
		text-align: center;
		color: #CACACA;
	}
	.border-top{
		border-top-width: 1px;
		border-top-color: #363636;
	}
</style>
